import { ref } from 'vue'
import { defineStore } from 'pinia'
import settings from '@/settings'

export const userSettingStore = defineStore('userSetting', () => {
  const show = ref(false)
  const theme = ref(localStorage.getItem('theme') || settings.themeColor)
  const showSettings = ref(settings.showSettings)
  const tagsView = ref(settings.tagsView)
  const fixedHeader = ref(settings.fixedHeader)
  const sidebarLogo = ref(settings.sidebarLogo)
  const deviceWidth = ref(
    (() => {
      try {
        const storedWidth = localStorage.getItem('deviceWidth')
        return storedWidth ? JSON.parse(storedWidth) : settings.deviceWidth
      } catch (error) {
        console.error('Error parsing deviceWidth from localStorage:', error)
        return settings.deviceWidth
      }
    })()
  )

  return {
    show,
    theme,
    showSettings,
    tagsView,
    fixedHeader,
    sidebarLogo,
    deviceWidth
  }
})
